<template>
  <div class="sSearchResult">
    <SearchUI @search="search" @blur="blur" @focus="focus" @click="focus" />
    <div v-show="show" class="result" @mousedown.prevent>
      <div ref="eList" class="list">
        <table>
          <tr v-for="item of searchResult" :key="item.objectID" @click="select(item)">
            <th>{{ item.name }}</th>
            <td>
              <div class="tit" v-html="item.path"></div>
              <pre v-html="item.content" />
            </td>
          </tr>
        </table>
        <BottomLoad
          ref="vBottomLoad"
          class="loaderBottom"
          :getElem="()=>$refs.eList"
          :init-start="false"
          :start-page="0"
          :load="load"
        />
      </div>
      <div class="algoliaLogoBox">
        <a class="algoliaLogo" href="https://www.algolia.com/docsearch"></a>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import SearchUI from './SearchUI.vue'
import dataApi from '../data-api'
import { Emit, Watch } from 'vue-property-decorator'
import BottomLoad from './bottom-load/BottomLoad.vue'
interface RefBottomLoad extends Vue {
  restart (): void
  hide (): void
}
@Component({
  components: {
    SearchUI,
    BottomLoad
  }
})
export default class Search extends Vue {
  private show = false
  private noData = false
  private loaded = false
  private searchResult: SearchResultItem[] = []
  private kw = ''
  async search (kw: string) {
    this.kw = kw
  }
  @Watch('kw')
  onKwHandle (kw: string) {
    this.searchResult = []
    if (kw) {
      this.show = true
      this.noData = false;
      (this.$refs.vBottomLoad as RefBottomLoad).restart()
    } else {
      this.show = false
      this.noData = true;
      (this.$refs.vBottomLoad as RefBottomLoad).hide()
    }
  }
  @Emit()
  select (item: SearchResultItem) {
    this.show = false
  }
  async load (page: number) {
    let searchResult = (await dataApi.search(this.kw.replace(/\s+/g, ' '), page)) as SearchResultItem[]
    if (searchResult.length) {
      this.searchResult = this.searchResult.concat(searchResult)
      return
    }
    return 'finish' // 结束
  }
  blur () {
    this.show = false
  }
  focus () {
    if (this.kw) {
      this.show = true
    }
  }
}

</script>

<style scoped>
.sSearchResult {
  max-width: 360px;
  margin: 0 auto;
}
.sSearchResult .loaderBottom {
  padding: 8px 12px!important;
}
.result {
  background-color: #fff;
  position: fixed;
  z-index: 3;
  border: 1px solid #d1d5da;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.12);

}
.list {
  max-height: 500px;
  min-width: 300px;
  overflow: auto;
}
.result >>> {
  table {border-collapse: collapse;}
  tr {
    /* border-bottom: 2px solid blue; */
    border-bottom: 1px solid #e1e4e8;
    /* padding: 6px 0; */
    /* position: relative; */
    /* display: flex; */
    line-height: 1.4;
  }

  th {
    padding: 6px;
    background-color: #f1f1f1;
    border-bottom: 1px solid #e1e4e8;

    width: 100px;
    box-sizing: border-box;
    word-wrap: break-word;
    word-break: break-all;
  }
  td {
    padding: 6px;
    word-wrap: break-word;
    word-break: break-all;
  }
  tr:hover th,
  tr:hover td {
    background-color: #f9ffde;
  }

  .tit {
    font-weight: bold;
    padding: 2px 0 8px;
    /* font-size: 14px; */
  }
  pre {
    margin: 0;
    color:#333;font:14px/1.2 "Microsoft Yahei",Consolas;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
  }
  em {
    background: #ffe564;
  }
}

.algoliaLogoBox {
  padding: 6px 10px;
  text-align: right;
  background-color: #e4e7ed;
}
.algoliaLogo {
  display: inline-block;
  width: 111px;
  height: 15px;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}
</style>
